<template>
	<view class="content">
		<view class="top-wrapper">
			<view class="avatar-box">
				<image src="../../static/image/vertical_bg1.png" class="avatar" ></image>
				<view class="user-name-box">
					<view class="user-name">匿名用户</view>
					<uni-tag text="Lv.8" size="mini" bg-color="#a9aba6" color="#fff" border-color="transparent" shape="circle"/>
				</view>
			</view>
			
			<view class="top-grid">
				<view class="top-grid-item" v-for="(item ,index) in topGridData" :index="index" :key="index" @tap="jump(item.type)">
					<view :class="item.icon"></view>
					<view class="m-text">{{item.text}}</view>
				</view>
			</view>
		</view>
		
		<view class="middle"></view>
		
		<view class="bottom-wrapper">
			<uni-section title="最近播放" type="line" class="list_box">
				<view class="item_box">
					<view class="item_box_content" @tap="playList('playList')">
						<image src="../../static/image/vertical_bg2.png" mode=""></image>
						<view class="item_box_content_info">
							<uni-title type="h5" title="全部已播放歌曲" color="#000"></uni-title>
							<uni-title type="h5" :title="songNum + '首'" color="#444"></uni-title>
						</view>
					</view>
					<view class="item_box_content" @tap="playList('songSheetPlayList')">
						<image :src="songSheetInfo.picUrl" mode=""></image>
						<view class="item_box_content_info">
							<uni-title type="h5" :title="songSheetInfo.name" color="#000"></uni-title>
							<uni-title type="h5" title="继续播放" color="#444"></uni-title>
						</view>
					</view>
				</view>
			</uni-section>
			
			<uni-section title="创建歌单" type="line" class="list_box" >
				<template v-slot:right><view @click="more"><uni-icons type="more" size="30"></uni-icons></view></template>
				<view class="item_box" v-if="songSheet.length">
					<view class="item_box_content" v-for="(item, index) in songSheet" :key="index" @tap="jumpSongSheet(item.id)">
						<image :src="item.coverImgUrl" mode=""></image>
						<view class="item_box_content_info">
							<uni-title type="h5" :title="item.title" color="#000"></uni-title>
							<uni-title type="h5" :title="item.author" color="#444"></uni-title>
						</view>
					</view>
				</view>
			</uni-section>
		</view>
		
		<u-popup-list :list="geDanFunctions" :refs="ref" v-if="show"></u-popup-list>
		<u-song-sheet :refs="ref" @update="songSheetList"></u-song-sheet>
	</view>
</template>

<script>
	import {searchMultimatch, mergeSearch, search} from '@/API/API.js';
	import util from '@/utils/util.js';
	export default{
		data(){
			return{
				topGridData: [
					{text: '收藏', 'type':'1', icon:'iconfont icon-aixin m-icon'},
					{text: '本地', 'type':'2', icon:'iconfont icon-xiazai m-icon'},
					{text: '歌单', 'type':'3', icon:'iconfont icon-yinlegedanyinfu m-icon'},
					{text: '电台', 'type':'4', icon:'iconfont icon-diantai m-icon'}
				],
				ref: 'songSheetPopup',
				show: true,
				geDanFunctions: [
					{text: '创建新歌单', type: 'create'},
					{text: '歌单管理', type: 'manage'},
					{text: '恢复歌单', type: 'regain'},
				],
				songSheet: [],
				songNum: 0,
				songSheetInfo: {
					name: '歌单歌曲',
					picUrl: '../../static/image/vertical_bg2.png'
				}
			}
		},
		
		onLoad() {
			this.songSheetList();
		},
		
		onShow() {
			this.getPlayList();
			this.getSongSheetName();
		},
	
		methods: {
			more(){
				uni.$emit('popup', {type: 'popup', param: 0});
			},
			
			songSheetList(){
				this.songSheet = [];
				let songSheet = JSON.parse(util.getStorageSync('songSheet'));
				songSheet.forEach((val, key) => {
					if(!val.isDel){
						this.songSheet.push(val);
					}
				})
			},
			
			jump(type){
				switch(type){
					case '1':
						util.jump('navigateTo','/pages/my/collection');
					break;
					
					case '2':
						uni.showToast({ title: '暂不支持下载', icon: 'none', duration:3000 });
					break;
					
					case '3':
						uni.showToast({ title: '歌单在下方 ↓', icon: 'none', duration:3000 });
					break;
					
					case '4':
						uni.showToast({ title: '暂不支持电台', icon: 'none', duration:3000 });
					break;
				}
			},
			
			jumpSongSheet(id){
				util.jump('navigateTo', '/pages/my/songSheet?id=' + id);
			},
			
			playList(type){
				console.log(type)
				util.jump('navigateTo', '/pages/my/playList?type=' + type);
			},
			
			getPlayList(){
				let value = JSON.parse(util.getStorageSync('playList'));
				this.songNum = value.length;
			},
			
			getSongSheetName(){
				let value = JSON.parse(util.getStorageSync('songSheetInfo'));
				if(Object.keys(value.name))
					this.songSheetInfo = value;
			}
		}
	}
</script>

<style>
	@import url("@/static/css/iconfont.css");
	.top-wrapper{
		width: 100%;
		height: 200px;
		background-image: linear-gradient(to top, #8a8c87, #9a988c); 
	}
	
	.avatar-box{
		display: flex;
		padding: 20px;
		margin-top: 30px;
	}
	
	.avatar-box .avatar{
		width: 48px;
		height: 48px;
		border-radius: 50%;
		margin-right: 4%;
	}
	
	.user-name-box .user-name{
		font-size: 14px;
		color: #fff;
	}
	
	.top-grid{
		display: flex;
		justify-content: space-around;
	}
	
	.top-grid .m-icon{
		font-size: 26px !important;
		text-align: center;
		color: #ffffff;
	}
	
	.top-grid .m-text{
		font-size: 12px;
		text-align: center;
		margin-top: 8rpx;
		color: #ffffff;
	}
	
	.middle{
		width: 100%;
		height: 30px;
		background-color: #fff;
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
		margin-top: -6%;
	}
	
	.bottom-wrapper{
		width: 100%;
		height: 410px;
		background-color: #fff;
	}
	
	.bottom-wrapper .list_box{
		width: 98%;
		margin: 0 auto;
	}
	
	.bottom-wrapper .list_box .item_box{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	
	.bottom-wrapper .list_box .item_box .item_box_content{
		display: flex;
		align-items: center;
		margin-bottom: 20px;
	}
	
	.bottom-wrapper .list_box .item_box .item_box_content image{
		width: 60px;
		height: 60px;
		border-radius: 8px;
		margin-right: 6px;
	}
	
	.bottom-wrapper .list_box .item_box .item_box_content .item_box_content_info{
		display: flex;
		flex-direction: column;
	}
	
	/deep/.uni-title__box{
		padding: 0;
	}
	
	/deep/ .uni-h5{
		width: 86px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
</style>